<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { $LoginId, $UpdateUser } from '@/api/user';

// 用户数据
var user = ref({
    id: 0,
    name: "",
    userpassword: "",
    phone: "",
    email: "",
    sex: "",
    address: "",
    doctorID: "",
    time: ""
})

// 挂载前调用
onBeforeMount(() => {
    let ret = $LoginId({
        id: sessionStorage.getItem('id')
    })
    ret.then((res) => {
        user.value = res.data

    })
})

// 修改用户信息
const updateUser = () => {
    $UpdateUser(user.value)
}

</script>

<template>
    <div class="personal-info">
        <div class="info-top">
            <span>个人信息</span>
        </div>
        <div class="info-bottom">
            <div class="info-bottom-body">
                <li>
                    <label for="account">账号&nbsp;:</label>
                    <input type="text" id="account" placeholder="请输入账号" disabled v-model="user.id" />
                </li>
                <li>
                    <label for="username">姓名&nbsp;:</label>
                    <input type="text" id="username" placeholder="请输入姓名" v-model="user.name" />
                </li>
                <li>
                    <label for="phone">电话&nbsp;:</label>
                    <input type="text" id="phone" placeholder="请输入电话" v-model="user.phone" />
                </li>
                <li>
                    <label for="email">邮箱&nbsp;:</label>
                    <input type="text" id="email" placeholder="请输入邮箱" v-model="user.email" />
                </li>
                <li>
                    <label for="sex">性别&nbsp;:</label>
                    <input type="radio" name="sex" id="male" value="男" class="sex" v-model="user.sex" />
                    <label for="male">男</label>
                    <input type="radio" name="sex" id="female" value="女" class="sex" v-model="user.sex" />
                    <label for="female">女</label>
                </li>
                <li>
                    <label for="address">所在地&nbsp;:</label>
                    <input type="text" id="address" placeholder="请输入所在地" v-model="user.address" />
                </li>
                <button class="info-bottom-body-btn" @click="updateUser">
                    更新信息
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.personal-info {
    flex: 3;
    display: flex;
    flex-direction: column;
    height: 110vh;
    color: #333;

    .info-top {
        flex: 1;
        display: flex;
        align-items: center;
        background-color: #fff;
        border-radius: 0.5vw;
        padding-left: 3vw;
        margin-bottom: 2vh;
        border: 0.1vw solid #ccccccba;

        span {
            font-size: 1.2vw;
            font-weight: 800;
            line-height: 3vh;
            padding-left: 2vw;
            border-left: 0.5vw solid #45c998;
        }
    }

    .info-bottom {
        flex: 12;
        display: flex;
        justify-content: center;
        border-radius: 0.5vw;
        background-color: #fff;
        border: 0.1vw solid #ccccccba;

        .info-bottom-body {
            margin: 4vh 0;

            li {
                display: flex;
                align-items: center;
                font-size: 1.2vw;
                margin: 5vh 0;

                label {
                    width: 5vw;
                    cursor: pointer;
                }

                input {
                    width: 20vw;
                    height: 7vh;
                    font-size: 1.1vw;
                    padding-left: 1vw;
                    border: 0.1vw solid #ccccccba;
                }

                .sex {
                    width: 1.4vw;
                    height: 1.4vw;
                    margin-right: 1vw;
                }
            }

            .info-bottom-body-btn {
                width: 25vw;
                height: 7vh;
                background-color: #45c998;
                border: none;
                color: #fff;
                font-size: 1.2vw;
                border-radius: 0.5vw;
                cursor: pointer;
            }
        }
    }
}
</style>